// Card.qml
import QtQuick
import QtQuick.Layouts
import QtQuick.Effects

Item {
    id: root

    Theme {
            id: theme
            }

    property bool backgroundVisible: true
    property color cardColor: theme.primaryColor
    property real radius: 15
    property int padding: 15 // 内容区域的内边距

    property bool shadowEnabled: false
    property color shadowColor: theme.shadowColor

    property int fixedWidth: 220
    property int fixedHeight: 100

    // 渐变背景控制（默认关闭）
    property bool gradientEnabled: false
    property color gradientFrom: "#EBF2FB"
    property color gradientTo: "#A0C9F2"

    property bool backgroundImageEnabled: false
    property url backgroundImageSource: ""

    // 叠加层插槽：用于在卡片之上放置不受布局管理的内容
    //（例如固定在卡片上的悬浮按钮）
    property alias overlay: overlayLayer.data

    // 插槽
    default property alias content: contentLayout.data

    width: root.fixedWidth
    height: root.fixedHeight

    // 阴影
    MultiEffect {
        source: background
        anchors.fill: background
        visible: root.shadowEnabled && root.backgroundVisible
        shadowEnabled: true
        shadowColor: root.shadowColor
        shadowBlur: theme.shadowBlur
        shadowVerticalOffset: theme.shadowYOffset
        shadowHorizontalOffset: theme.shadowXOffset
    }

    //背景
    Rectangle {
        id: background
        visible: root.backgroundVisible
        anchors.fill: parent
        radius: root.radius
        color: (root.gradientEnabled || root.backgroundImageEnabled) ? "transparent" : root.cardColor
        clip: true

        Image {
            anchors.fill: parent
            source: root.backgroundImageSource
            visible: root.backgroundImageEnabled && root.backgroundImageSource !== ""
            fillMode: Image.Stretch
            smooth: true
        }

        // 使用 Canvas 绘制斜向渐变
        Canvas {
            id: gradientCanvas
            anchors.fill: parent
            visible: root.gradientEnabled
            onPaint: {
                var ctx = getContext("2d");
                ctx.clearRect(0, 0, width, height);

                // 创建左上到右下的线性渐变
                var grad = ctx.createLinearGradient(0, 0, width, height);
                grad.addColorStop(0, root.gradientFrom);
                grad.addColorStop(1, root.gradientTo);
                ctx.fillStyle = grad;

                // 绘制圆角矩形以匹配背景 radius
                var r = background.radius || 0;
                var w = width;
                var h = height;
                ctx.beginPath();
                ctx.moveTo(r, 0);
                ctx.lineTo(w - r, 0);
                ctx.quadraticCurveTo(w, 0, w, r);
                ctx.lineTo(w, h - r);
                ctx.quadraticCurveTo(w, h, w - r, h);
                ctx.lineTo(r, h);
                ctx.quadraticCurveTo(0, h, 0, h - r);
                ctx.lineTo(0, r);
                ctx.quadraticCurveTo(0, 0, r, 0);
                ctx.closePath();
                ctx.fill();
            }

            onVisibleChanged: requestPaint()
            onWidthChanged: requestPaint()
            onHeightChanged: requestPaint()
        }
    }

    // 内容
    ColumnLayout {
        id: contentLayout
        anchors.fill: parent
        anchors.margins: root.padding
        spacing: 8
    }

    // 叠加层，位于内容之上，不受 ColumnLayout 管理
    Item {
        id: overlayLayer
        anchors.fill: parent
        z: 10
    }
}
